<template>
	<!-- 头条快报 -->
	<view class="diy-special dis-flex flex-y-center">
		<!-- 图片 -->
		<form bindsubmit="_onTargetIndex" report-submit="true">
			<button formType="submit" class="btn-normal dis-flex">
				<view class="special-left"><image class="image" mode="widthFix" :src="itemStyle.image"></image></view>
			</button>
		</form>
		<!-- 资讯轮播 -->
		<swiper :class="'special-content flex-box display_' + itemStyle.display" :autoplay="true" :interval="2200" duration="800" :circular="true" :vertical="true" :display-multiple-items="itemStyle.display">
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<form @submit="onTargetDetail" report-submit="true" :data-id="item.article_id">
					<button formType="submit" class="btn-normal dis-flex">
						<view class="content-item onelist-hidden">
							<text>{{ item.article_title }}</text>
						</view>
					</button>
				</form>
			</swiper-item>
		</swiper>
		<!-- 更多资讯 -->
		<form @submit="onTargetIndex" report-submit="true">
			<button formType="submit" class="btn-normal dis-flex">
				<view class="special-more"><i class="suifont sui-xiangyoujiantou"></i></view>
			</button>
		</form>
	</view>
</template>

<script>
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		/**
		 * 跳转文章首页
		 */
		onTargetIndex(e) {
			// 记录formid
			this.navigateTo({
				url: '/pageSupport/article/index'
			});
		},

		/**
		 * 跳转文章详情页
		 */
		onTargetDetail(e) {
			// 记录formid
			this.navigateTo({
				url: '/pageSupport/article/detail/index?article_id=' + e.target.dataset.id
			});
		}
	}
};
</script>

<style>
/* 头条快报 */

.diy-special .special-left {
	padding: 10rpx 20rpx;
}

.diy-special .special-left .image {
	display: block;
	width: 140rpx;
}

.diy-special .special-content {
	/* width: 500rpx; */
	overflow: hidden;
}

.diy-special .special-content .content-item {
	padding: 4rpx 0;
	font-size: 26rpx;
	color: #141414;
	/* height: auto; */
}

.diy-special .special-content.display_1 {
	height: 44rpx;
}

.diy-special .special-content.display_2 {
	height: 88rpx;
}

.diy-special .special-more {
	padding: 24rpx 20rpx;
	font-size: 24rpx;
}
</style>
